<template>
    
    <!-- 组件的模板 -->
    <div class="yf-formtjdetail">
        <div class="weui-cells" v-if="user_name">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p class="isTitle">提交人</p>
                </div>
                <!-- <div class="weui-cell__ft">说明文字</div> -->
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p class="isValue">{{user_name}}</p>
                </div>
                <!-- <div class="weui-cell__ft">说明文字</div> -->
            </div>
        </div>
        <div class="weui-cells"  v-if="user_mobile">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p class="isTitle">手机号</p>
                </div>
                <!-- <div class="weui-cell__ft">说明文字</div> -->
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p class="isValue">{{user_mobile}}</p>
                </div>
                <!-- <div class="weui-cell__ft">说明文字</div> -->
            </div>
        </div>
        <div class="weui-cells" v-if="submit_time">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p class="isTitle">提交时间</p>
                </div>
                <!-- <div class="weui-cell__ft">说明文字</div> -->
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p class="isValue">{{submit_time}}</p>
                </div>
                <!-- <div class="weui-cell__ft">说明文字</div> -->
            </div>
        </div>
    </div>
    <div style="padding-bottom: 45px">
        <div v-for="list in lists"  class="yf-formtjdetail">
            <div class="weui-cells" v-if="list.type!=='Imageview'&&list.type!=='Location'">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p class="isTitle">{{list.info.title}}</p>
                    </div>
                    <!-- <div class="weui-cell__ft">说明文字</div> -->
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p class="isValue">{{list.info.value}}</p>
                    </div>
                    <!-- <div class="weui-cell__ft">说明文字</div> -->
                </div>
            </div>
            <div class="weui-cells" v-if="list.type==='Location'">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p class="isTitle">{{list.info.title}}</p>
                    </div>
                    <!-- <div class="weui-cell__ft">说明文字</div> -->
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p class="isValue">{{list.info.value.name}}({{list.info.value.addr}})</p>
                    </div>
                    <!-- <div class="weui-cell__ft">说明文字</div> -->
                </div>
            </div>

            <div class="weui-cells weui-cells_form" v-if="list.type==='Imageview'">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <div class="weui-uploader">
                            <div class="weui-uploader__hd">
                                <p class="weui-uploader__title isTitle">{{list.info.title}}</p>
                                <!-- <div class="weui-uploader__info">{{list.info.value.length}}/5</div> -->
                            </div>
                            <div class="weui-uploader__bd">
                                <ul class="weui-uploader__files" id="uploaderFiles">
                                    <li class="weui-uploader__file img" 
                                        v-for="imgurl in list.info.thumb_image_value"
                                        :style="'background-image:url('+imgurl+')'"
                                        @click="bigPicturePreview($parent.$index, $index)"
                                        >
                                        <!-- <img :src="imgurl" alt="" @click="bigPicturePreview($parent.$index, $index)"> -->
                                    </li>
                                    <!-- <li class="weui-uploader__file img">
                                        <img src="../../static/imgs/avatar.png" alt="">
                                    </li> -->
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!--     <div class="weui-cells__title submit_time" v-if="submit_time">提交时间:{{submit_time}}</div>
 -->
    <div class="yf-formtjdetail-bar" v-if="timedata.length > 1 && showbartab">
        <p :class="[selindex > 0 ? '' : 'notclick' ]" @click="prevnext('prev')">上一条</p>
        <p class="time formtjdetail-access" @click="selectTime()">{{selecttime}} 提交</p>
        <p :class="[selindex < sellng && selindex >= 0 ? '' : 'notclick' ]" @click="prevnext('next')">下一条</p>
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */

    import * as util from 'js/util.js'
    import cache from 'gapi/cache.js'
    import clientUi from 'gapi/clientUi.js'
    import commonPage from 'clientApi/commonPage.js'
    import widget from 'gapi/widget'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {

        },
        data: function(){
            return{
                submit_time: false,
                lists : [

                    ],
                timedata:[],
                selecttime:'',
                user_name:false,
                user_mobile:false,
                selindex: 0,
                sellng:0,
                showbartab:false
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                let record_id = util.getUrddataString('record_id'),
                    showbartab = util.getUrddataString('type');
                    if(showbartab === 'team'){
                        this.showbartab = true;
                    }
                // alert(record_id)
                this.getinfo(record_id);
                window.saveResume = () => {
                    clientUi.showDialog('提醒', '确认删除此表单？', (status) => {
                        // alert(status.status)
                        if(status.status == 1){
                            cache.getCache('user_info', (data) => {
                                util.ajax({
                                    url: '/form/user/report/del',
                                    type: 'POST',
                                    data: {
                                        team_id: data.team_id,
                                        project_id: data.project_id,
                                        record_id: record_id
                                    },
                                    timeout: 10000,
                                    success: (data) => {
                                        // success
                                        // alert(JSON.stringify(data))
                                        if(data.errno == 0){
                                            widget.toast('删除成功')
                                            commonPage.goBack(1)
                                        }else if(data.errno == 22005){
                                            widget.toast('该表单不可删除')
                                        }else{
                                            // widget.toast('服务器异常')
                                            widget.toast(data.errmsg)
                                            // alert(JSON.stringify(data))
                                        }
                                    },
                                    error: (xhr, status) => {
                                        // error
                                        widget.toast('服务器异常')
                                    },
                                    noNetwork: () => {
                                        // 无网络的回调
                                        widget.toast('网络连接失败，请检查网络')
                                    }
                                })
                            })
                        }
                    }, '确认', '取消')
                }
            },
            getinfo(record_id){
                commonPage.loadPageStatus('loading')
                cache.getCache('user_info', (data) => {
                    util.ajax({
                        url: '/form/user/report/info',
                        type: 'GET',
                        data: {
                            team_id: data.team_id,
                            project_id: data.project_id,
                            record_id: record_id
                        },
                        timeout: 10000,
                        success: (data) => {
                            // success
                            if(data.errno == 0){
                                console.log(JSON.stringify(data))
                                this.lists = data.data.info;
                                this.submit_time = data.data.submit_time.split(' ')[0];
                                document.title = data.data.title;
                                this.user_name = data.data.user_name;
                                this.user_mobile = data.data.user_mobile;
                                if(data.data.today_time_list.length > 0){
                                    let time = [],
                                        record_id_list = [];
                                    for(let i = 0, lg = data.data.today_time_list.length;i < lg; i++){
                                        time.push(util.getLocalTime(data.data.today_time_list[i].create_at*1000, 'HH:mm'));
                                        record_id_list.push(data.data.today_time_list[i].id)
                                        if(data.data.today_time_list[i].id ==  record_id){
                                            this.selindex = i;
                                        }
                                    }
                                    this.timedata = time;
                                    this.recordidlist = record_id_list;
                                    //console.log(record_id_list);
                                    this.selecttime = this.timedata[this.selindex];
                                    this.sellng = this.timedata.length - 1;
                                    //console.log(JSON.stringify(this.recordidlist))
                                }else{
                                    this.timedata = [];
                                }
                                commonPage.loadPageStatus('loadSuccess')
                                //this.time = util.getLocalTime(data.data.today_time_list.create_at, 'yyyy-MM-dd');
                            }else{
                                // widget.toast('服务器异常')
                                widget.toast(data.errmsg)
                                commonPage.loadPageStatus('loadSuccess')
                            }
                            // alert(JSON.stringify(data))
                        },
                        error: (xhr, status) => {
                            // error
                            widget.toast('服务器异常')
                        },
                        noNetwork: () => {
                            // 无网络的回调
                            widget.toast('网络连接失败，请检查网络')
                        }
                    })
                })                
            },
            bigPicturePreview (parent_index, index){
                // alert(JSON.stringify(this.lists[parent_index].info.value))
                clientUi.bigPicturePreview('title', this.lists[parent_index].info.value, index)
            },
            selectTime (){
                let select = [this.selindex];
                clientUi.showPicker({data1:this.timedata}, select, '请选择', (data) => {
                    if(!data.data1 || this.selindex === +data.data1)return;
                    commonPage.loadPageStatus('loading')
                    this.selecttime = this.timedata[data.data1];
                    this.selindex = +data.data1;
                    this.getinfo(this.recordidlist[this.selindex])
                })
            },
            prevnext (ops){
                if(ops === 'next'){
                    if(this.selindex === this.sellng)return;
                    ++this.selindex;
                }else{
                    if(this.selindex === 0)return;
                    --this.selindex;
                }
                commonPage.loadPageStatus('loading')
                this.selecttime = this.timedata[this.selindex];
                this.getinfo(this.recordidlist[this.selindex])
            }
        },
        created(){
            this.init();
            let type = util.getUrddataString('type');
            if(type == 'person'){
                commonPage.updateTitleBar({
                    rightDisplay: true,            // 是否显示右按钮
                    rightText: '删除',            // 右按钮文案
                    rightAction: 'saveResume'    // 点击右按钮的文案（即回调函数名称）
                })
            }
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style type="text/css">
    html body{
        background-color: #f2f2f2;
    }
    p.isTitle{
        font-size: 14px;
        color:#666;
    }
    p.isValue{
        font-size: 16px;
        color:#333;
    }
    li.img{
        overflow: hidden;
        width:60px;
        height:60px;
        /*box-sizing: border-box;
        margin-right:0;
        padding-right: 9px;*/
        margin-right: 8px;
        margin-bottom: 8px;
    }
    li.img img{
        /*width:100%;*/
        width: 60px;
        /*height: 60px;*/
    }
    div.weui-uploader__input-box{
        width:60px;
        height:60px;
        margin-right: 8px;
        margin-bottom: 8px;
    }
    div.submit_time{
        text-align: center;
    }
    div.weui-cells{
        margin-top: 12px;
    }
    div.weui-cell__bd p {
         white-space: normal; 
        /* overflow: hidden; 
         text-overflow: ellipsis; */
    }
    .yf-formtjdetail:last-child{
        padding-bottom: 45px;
    }
    .yf-formtjdetail-bar{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 48px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid #e5e5e5;
        z-index: 99;
    }
    .yf-formtjdetail-bar p{
        font-size: 14px;
        color: #FFAA00;
        padding: 0 12px;
    }
    .yf-formtjdetail-bar .notclick{
        color:#ccc;
    }
    .yf-formtjdetail-bar .time{
        color: #666;
        font-size: 16px;
    }
    .formtjdetail-access::after{    
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background:url('../../static/imgs/triangle.png') no-repeat;
        margin-left: 4px;
        background-size:10px 5px;
        background-position:0px 2px;
    
    }
</style>


